<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<title>申请供应商</title>
	<link rel="stylesheet" type="text/css" href="../css/supplier.css">
	<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
	<script type="text/javascript" src="../js/rem2.js"></script>
</head>
<body>
	<div class="wrap">
		<!-- 头部 -->
		<div class="header">
			<label class="header_left"><img src="../img/w_nav_back.png"></label>
			<div class="header_choose">
				<div class="choose_left"><a href="daili.html">申请代理</a></div>
				<div class="choose_right"><a href="javascript:void(0)">申请供应商</a></div>
			</div>
			<label class="header_right"><img src="../img/ico_msg.png"></label>
		</div>
		<!-- 头部 -->
		<!-- 内容 -->
		<div class="content">
			<img src="../img/adv540x430.jpg">
			<h4>免费申请成为供应商,一键开店,简单、快捷、明了、欢迎申请!</h4>
			<div class="supplier_btn">申请成为供应商</div>
		</div>
		<!-- 内容 -->
		<!-- 弹出框 -->
		<div class="mask">
			<div class="mask_content">
				<h4>申请供应商</h4>
				<div class="input_apply">
					<span>企业名称</span>
					<input type="text" name="" class="firmName" placeholder="请输入企业名称">
				</div>
				<div class="input_apply">
					<span>联系人</span>
					<input type="text" name="" class="contact" placeholder="请输入联系人">
				</div>
				<div class="input_apply">
					<span>联系人电话</span>
					<input type="text" name="" class="phone" placeholder="请输入联系人电话">
				</div>
				<div class="input_apply">
					<textarea placeholder="请输入联系人地址" class="address" rows="2" cols="20"></textarea>
				</div>
				<div class="line"></div>
				<div class="button">提交</div>
			</div>
		</div>
		<div class="mask_s">
			<div class="ms_content">
				<i class="iconfont icon-smile"></i>
				<p>申请提交成功</p>
			</div>
		</div>
		<div class="mask_us">
			<div class="mus_content">
				<i class="iconfont icon-laba-"></i>
				<p class="p">输入框不能为空</p>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var supBtn = document.querySelector(".supplier_btn")
	var mask = document.querySelector(".mask")
	var button = document.querySelector(".button")
	supBtn.addEventListener("click",function(e){
		mask.style.display="block";
	})
	button.addEventListener("click",function(e){
		var firmName = document.querySelector(".firmName")
		var contact = document.querySelector(".contact")
		var phone = document.querySelector(".phone")
		var address = document.querySelector(".address")
		var mask_s = document.querySelector(".mask_s")
		var mask_us = document.querySelector(".mask_us")
		var p = document.querySelector(".p")
		var wen = /[^\u4e00-\u9fa5]/
		if(firmName.value&&contact.value&&phone.value&&address.value){
			if(wen.test(firmName.value)||!firmName.value.trim()){
				p.innerHTML="<p class='p'>需纯中文</p>"
				mask_us.style.display="block"
				let timer = setTimeout(function(){
					mask_us.style.display="none"
				},2000)
				firmName.value=""
				return
			}
			if(contact.value.length < 1 || contact.value.length >= 4 || wen.test(contact.value)){
				p.innerHTML="<p class='p'>需纯中文,长度小于4</p>"
				mask_us.style.display="block"
				let timer = setTimeout(function(){
					mask_us.style.display="none"
				},2000)
				contact.value=""
				return
			}
			if(!/^1\d{10}$/.test(phone.value)){
				p.innerHTML="<p class='p'>以1开头的11位数字</p>"
				mask_us.style.display="block"
				let timer = setTimeout(function(){
					mask_us.style.display="none"
				},2000)
				phone.value=""
				return
			}
			if(address.value==""||!address.value.trim()){
				p.innerHTML="<p class='p'>不能为空</p>"
				mask_us.style.display="block"
				let timer = setTimeout(function(){
					mask_us.style.display="none"
				},2000)
				address.value=""
				return
			}
			mask.style.display="none"
			mask_s.style.display="block"
			let time = setTimeout(function(){
				mask_s.style.display="none"
			},2000)
		}else{
			mask_us.style.display="block"
			let timer = setTimeout(function(){
				mask_us.style.display="none"
			},2000)
			return
		}
	})
</script>
</html>